<html>
<head>
  <style>
    @font-face {
      font-family: 'ahem';
      src: url(../../resources/Ahem.ttf);
    }
  </style>
  <template id="shadow-template">
    <style>
      :host {
        color: red;
      }
    </style>
    <div style="font-family: ahem;"><h1>Hi!</h1></div>
  </template>
</head>
<body class="body-class">
<img srcset="1x.png 1x, 2x.png 2x">
<div style="font-family: ahem;">
  <div class="class1">Some Text</div> And More Text
  <div style="display:inline-block; width: 200px" id="A">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet est sem.
      Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales nulla et
      ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodales ac lectus sed,
      hendrerit efficitur est. Quisque gravida facilisis viverra.
    </p>
    <ul class="class3">
      <li class="class4"></li>
      <span id="B">Lets have a span</span>
    </ul>
  </div>
  <div style="transform: rotateZ(90deg); width: 200px" id="C">Rotated text!</div>
  <iframe src='./simple-iframe.html' width="400" height="200"></iframe>
  <div id="shadow-host"></div>
  <a href="https://www.google.com/">Click ME!</a>
</div>
<meta http-equiv="content-language" content="de">
<script>
document.getElementById('A').addEventListener('listenerA', () => {});
document.getElementById('B').addEventListener('listenerB', () => {});
document.getElementById('C').addEventListener('listenerC', () => {});
document.addEventListener('documentListener', () => {});
</script>
</body>
</html>
